<template>
	<view class="container">
		<view class="input">
			<input class="uni-input" :value="title" @input="gettitle" maxlength="10" placeholder="名称(最长10个字)" />
		</view>
		<view class="item flex space-between mgt-20">
			<view class="flex"> <text class="mgr-2">类型</text>
				<uni-icons type="help" size="20" color="#1e90ff" @click="gohelp"></uni-icons>
			</view>
			<view class="flex align-center height100" @click="selectbox">
				<text class="lineHeight1 fsize28">{{list[listSelect]}}</text>
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
		</view>

		<!-- 单选的区域 -->
		<view class=" betweentime optionalBox " v-if="listSelect===1 ||listSelect===2">
			<view class="betweentime-title">
				选项
			</view>

			<view class="optionalBox-item flex bordertop" v-for="(item,index) in optionVal" :key="index">
				<view class="left" @click="removeVal(index)">
					<view class="box">
						<image src="/static/images/index/reduce-icon.png" mode=""></image>
					</view>
				</view>
				<view class="right">
					<input class="uni-input" v-model="optionVal[index]" maxlength="30" placeholder="选项(最长30个字)" />
				</view>
			</view>

			<view class="optionalBox-item flex bordertop" @click="addVal">
				<view class="left">
					<view class="box">
						<image src="/static/images/index/add-icon.png" mode=""></image>
					</view>
				</view>
				<view class="right">
					添加选项
				</view>
			</view>
		</view>
		<view class="bottom-btn" @click="addOK" v-if="flag==''"> 创建 </view>
		<view class="bottom-btn" @click="addOK" v-else> 确定 </view>

		<!-- 遮罩层 -->
		<view class="mask" @click="isselectbox=false" v-if="isselectbox">

		</view>
		<view class="bigbox" v-if="isselectbox">
			<view class="box flex">
				<view class="item" v-for="(item,index) in list" :key="index" @click="btnClick(index)">
					{{item}}
				</view>

			</view>

			<view class="cancel" @click="selectbox">
				取消
			</view>
		</view>



	</view>
</template>

<script>
	export default {

		data() {
			return {
				title: "",
				isselectbox: false,
				list: ["文本", "单选", "多选", "定位", "图片", "昵称", "日期+时间", "日期", "时间", "拍照"],
				listSelect: 0,
				optionVal: ["",""], //选项值数组
				index: 0, //上一个页面的下标
				flag: "", // 判断是创建还是
			}
		},
		onLoad(option) {
			this.title = option.title;
			if(option.index){
				this.index = option.index-1;
				var pages = getCurrentPages();
				// 获取数组的倒数第二个对象
				var prePage = pages[pages.length - 2];
				
				console.log('编辑item',prePage.$vm.btnText);
				this.listSelect = prePage.$vm.btnText[this.index].form_data_type - 1;
				this.optionVal =  prePage.$vm.btnText[this.index].options;
			}
			this.flag = option.title;
		},

		methods: {
			removeVal(index) {
				this.optionVal.splice(index, 1)
			},
			addVal() {
				this.optionVal.push('')
			},
			gettitle(e) {
				this.title = e.detail.value
			},
			gohelp() {
				uni.navigateTo({
					url: "../me/help"
				})
			},
			selectbox() {
				this.isselectbox = !this.isselectbox
			},
			btnClick(val) {
				console.log(val);
				this.listSelect = val
				this.isselectbox = false
			},


			addOK() {
				let flag = 1
				console.log(this.title, 'titletitletitletitle');
				if (this.title == "" || this.title == undefined) {
					flag = 0
					uni.showToast({
						title: '名称不能为空！',
						icon: 'none'
					})
					return
				} else if (this.listSelect === 1 || this.listSelect === 2) {
					for (let i in this.optionVal) {
						if (this.optionVal[i] == "" || this.optionVal[i] == null) {
							flag = 0
							uni.showToast({
								title: '选项不能为空！',
								icon: 'none'
							})
							return
						}
					}
				}
				uni.showLoading({
					title: "创建中···"
				})
				if (flag === 1) {
					console.log('ok');
					// 获取上一个页面的数据,
					// 获取当前开着的所有的页面对象,array,  item =>  所有的参数和方法
					var pages = getCurrentPages();
					// 获取数组的倒数第二个对象
					var prePage = pages[pages.length - 2];
					console.log('prePage', prePage)
					if (this.listSelect == 9) {
						this.listSelect = 10
					}
					console.log(this.optionVal, 'this.optionValthis.optionValthis.optionValthis.optionVal');
					console.log(prePage.$vm.btnText,
						'prePage.$vm.btnTextprePage.$vm.btnTextprePage.$vm.btnTextprePage.$vm.btnText');
					// 修改
					//创建的情况
					prePage.$vm.btnText.push({
						title: this.title,
						form_data_type: this.listSelect + 1,
						options: this.optionVal,
						is_check: true,
						is_required: 1, //如果已选中，利用这个判断是必填（红色）还是选填（蓝色）
					});

					prePage.$vm.rubbish()
					// prePage.$vm.btnStylels=prePage.$vm.btnText.length
					uni.hideLoading()
					uni.navigateBack({})
				}

			}

		}

	}
</script>
<style lang="scss" scoped>
	.container {
		background-color: #f6f6f6;
		min-height: 100vh;

		.input {
			background-color: #fff;
			height: 85upx;
			display: flex;
			align-items: center;
			padding: 0 30upx;
		}

		.bordertop {
			border-top: 1px solid #eee;
		}

		.optionalBox {
			margin-top: 20upx;
			padding: 0 20upx;
			background-color: #fff;

			.betweentime-title {
				height: 100upx;
				display: flex;
				align-items: center;
			}

			.optionalBox-item {
				height: 100upx;
				display: flex;
				align-items: center;
			}
		}


		.left {
			display: flex;
			align-items: center;

			.box {
				margin-right: 30upx;
				width: 30upx;
				height: 30upx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.right {
			width: 100%;
		}

		.item {
			padding: 0 20upx;
			background-color: #fff;
			line-height: 70upx;
			font-size: 28upx;
		}

		.bottom-btn {
			background-color: #1e90ff;
			width: 700upx;
			height: 80upx;
			border-radius: 8upx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 40upx auto;
		}

		.bigbox {
			position: fixed;
			width: 100%;
			background-color: #eae7e8;
			bottom: 0;
			z-index: 996;

			.box {
				background-color: #ffffff;
				height: 380upx;
				padding: 20upx;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: fit-content;
					// padding: 25upx 85upx;
					width: 225upx;
					height: 60upx;
					line-height: 1;
					background-color: #a1a3a6;
					color: #fff;
					border-radius: 8rpx;
					margin: 12rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.cancel {
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				// margin-top: 30upx;
				// margin-bottom: 30upx;
			}
		}


	}
</style>
